{include file='pub/header'/}
<title>店铺基本信息</title>
<link href="__STATIC__/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav class="breadcrumb">{$breadNav}</nav>
<div class="page-container">
    <form class="form form-horizontal" id="base_info" method="post" enctype="multipart/form-data">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">店铺名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$shop.shopname}" placeholder="" name="shopname">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">店铺密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" value="{$shop.password}" placeholder="" disabled>
                <button type="button" class="btn btn-secondary radius" onclick="change_password()">修改密码</button>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">店铺logo：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div class="uploader-thum-container">
                    <div id="fileList" class="uploader-list">
                        {if $shop.shoplogo != ''}
                            <img src="{$shop.shoplogo}" style="width: 100px; height: 100px;"/>
                        {/if}
                    </div>
                    <div id="filePicker">选择图片</div>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>店铺位置：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="hidden" id="location" name="location" value="{$shop.location}">
                <input type="text" class="input-text" value="{$shop.address}" placeholder="" id="address"
                       name="address" readonly>
                <button type="button" class="btn btn-secondary radius" onclick="getLocation()">拾取地址</button>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>思迅分店编号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$shop.fendian}" placeholder=""
                       name="fendian">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">联系电话：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$shop.phone}" placeholder="" id="phone" name="phone">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">店铺折扣：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$shop.discount}" placeholder="" id="discount" name="discount">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">最低起送价：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$shop.limit_cost}" placeholder="" name="limit_cost">
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button class="btn btn-secondary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存信息
                </button>
            </div>
        </div>
    </form>
</div>


{include file="pub/footer"/}
<script type="text/javascript" src="__STATIC__/lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript">
    //修改密码
    function change_password(){
        layer_show('修改密码','{:url("ShopInfo/change_password")}', '300', '250');
    }
    //获取店铺地址信息
    function getLocation() {
        var index = layer.open({
            type: 2,
            title: "获取店铺地址信息",
            area: ['900px', '600px'],
            resize: true,
            content: "{:url('ShopInfo/getLocation')}"
        });
    }

    function setLocName(loc, lnglat) {
        $("#location").val(lnglat);
        $("#address").val(loc);
    }

    $(function () {
        var $list = $("#fileList"),
            $btn = $("#btn-star"),
            state = "pending";
        var uploader = WebUploader.create({
            auto: true,
            swf: '__STATIC__/lib/webuploader/0.1.5/Uploader.swf',
            // 文件接收服务端。
            server: '{:url("ShopInfo/shop_logo")}',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            fileNumLimit: 1
        });
        uploader.on('fileQueued', function (file) {
            var $li = $(
                '<div id="' + file.id + '" class="item">' +
                '<div class="pic-box"><img></div>' +
                '<div class="info">' + file.name + '</div>' +
                '<p class="state">等待上传...</p>' +
                '</div>'
                ),
                $img = $li.find('img');
            $list.html($li);
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, 100, 100);
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress-box .sr-only');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo($li).find('.sr-only');
            }
            $li.find(".state").text("上传中");
            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, res) {
            $('#' + file.id).addClass('upload-state-success').find(".state").text("已上传");
            if (res.code == 1) {
                var img = res.data;
                $("#base_info").append(img);
            }
        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            $('#' + file.id).addClass('upload-state-error').find(".state").text("上传出错");
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress-box').fadeOut();
            uploader.reset();
        });
        uploader.on('all', function (type) {
            if (type === 'startUpload') {
                state = 'uploading';
            } else if (type === 'stopUpload') {
                state = 'paused';
            } else if (type === 'uploadFinished') {
                state = 'done';
            }

            if (state === 'uploading') {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });

        $btn.on('click', function () {
            if (state === 'uploading') {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });

        $("#base_info").validate({
            rules: {
                location: {
                    required: true
                },
                address: {
                    required: true
                },
                shopname:{
                    required: true
                }
            },
            messages: {
                address: {
                    required: '店铺位置不能为空'
                },
                location:{
                    required:'位置不能为空'
                },
                shopname:{
                    required: '店铺名称不能为空'
                }
            },
            onkeyup: false,
            focusCleanup: true,
            success: "valid",
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    type: 'post',
                    url: '{:url("ShopInfo/baseInfo")}',
                    success: function (res) {
                        if (1 == res.code) {
                            layer.msg(res.msg, {icon: 6, time: 1000});
                            setTimeout(function () {
                                location.reload();
                            }, 888);
                        } else {
                            layer.msg(res.msg, {icon: 5, time: 1000});
                        }
                    }
                });

            }
        });


    });
</script>
</body>
</html>